<template>
  <waterfall :col="2">
    <template v-if="Object.keys(data).length !== 0">
      <div class="pr pbImgBox" v-for="(item, index) in data" :key="index">
        <div>
          <img :src="item.imgUrl" alt="加载错误" />
        </div>
        <p>{{ item.title | strsil }}</p>
      </div>
    </template>
  </waterfall>
</template>

<script>

export default {
  data() {
    return {
      data: [
        {
          title: "美少女战士动态图",
          imgUrl: "images/1.webp",
        },
        {
          title: "王俊凯",
          imgUrl: "images/ (17).webp",
        },
        {
          title: "来一组小众情侣头像",
          imgUrl: "images/ (102).webp",
        },
        {
          title: "三丽鸥头像",
          imgUrl: "images/ (8).webp",
        },
        {
          title: "闺蜜头像",
          imgUrl: "images/ (10).webp",
        },
        {
          title: "动漫头像",
          imgUrl: "images/ (89).webp",
        },
        {
          title: "绝美落日背景",
          imgUrl: "images/ (92).webp",
        },
        {
          title: "可可爱爱蓝色系壁纸",
          imgUrl: "images/ (13).webp",
        },

        {
          title: "如果我考试过了，请不要叫我学霸，要叫我赌神",
          imgUrl: "images/ (7).webp",
        },
        {
          title: "考试期间不要叫我真名，请叫我过儿",
          imgUrl: "images/9.webp",
        },
        {
          title: "我的脖子真可爱，上边顶个猪脑袋。",
          imgUrl: "images/ (107).webp",
        },
        {
          title: "你要暗自努力然后惊艳所有人",
          imgUrl: "images/19.webp",
        },
        {
          title: "恋人会背叛你，朋友会离开你，数学不会，不会就是不会。",
          imgUrl: "images/16.webp",
        },
        {
          title: "你们考试的时候也只会填名字、班级和学号吗?",
          imgUrl: "images/20.webp",
        },
        {
          title: "世界.上最宽广的是什么?考试范围。",
          imgUrl: "images/ (5).webp",
        },
        {
          title: "如果上课不能闭着眼，是否还能撑着脸",
          imgUrl: "images/14.webp",
        },
        {
          title: "你搅散一池星光， 成为我的月亮。",
          imgUrl: "images/10.webp",
        },
        {
          title: "想借你心头的月亮乘进一片浪漫。",
          imgUrl: "images/15.webp",
        },
        {
          title: "所念皆星河，星河皆是你。",
          imgUrl: "images/8.webp",
        },
        {
          title: "温柔半两，从容一生。",
          imgUrl: "images/ (11).webp",
        },
        {
          title: "难免落俗，但浪漫不死。",
          imgUrl: "images/ (8).webp",
        },
        {
          title: "苦尽甘来的那一天山河星月都做贺",
          imgUrl: "images/ (103).webp",
        },
        {
          title: "我喜欢你，胜于昨日，略匮明朝。",
          imgUrl: "images/ (72).webp",
        },
      ],
    };
  },
  computed: {
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    newarr() {
      return this.$store.state.aboutm.arr;
    },
  },
  mounted() {
    this.$store.dispatch("demoaxiosa");
  },
  filters: {
    strsil(val) {
      if (val.length > 7) {
        return val.substr(0, 10) + "..";
      } else {
        return val;
      }
    },
  },
  
};
</script>

<style scoped>
.pr{
  /* box-shadow: .005rem .01rem .025rem gray; */
  width: 98%;
  margin-top: 0.2rem 0;
  overflow: hidden;
  border-radius: .2rem;
  margin-top: .1rem;
  background-color: #fff;
  margin-right: 0.1rem;
  margin-left: 0.1rem;
}
.pr>
div {
  width: 98%;
  margin-top: 0.2rem 0;
  overflow: hidden;
  border-radius: .2rem;
}
img {
  display: inline-block;
  border-radius: .2rem;
  
}
p {
  margin-left: 0.1rem;
  font-size: 0.15rem;
  height: 0.5rem;
  line-height: 0.4rem;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
}
</style>